<template>
  <div style="max-width: 600px; margin: 40px auto;">
    <el-card shadow="hover" style="text-align: center; padding-bottom: 40px;">
      <!-- 头像 -->
      <el-image
          style="width: 120px; height: 120px; border-radius: 50%; margin: 0 auto 20px;"
          :src="user.avatarUrl"
          fit="cover"
          alt="用户头像"
      />

      <!-- 昵称 -->
      <h2 style="margin-bottom: 20px;">{{ user.nickname || user.username }}</h2>

      <!-- 详细信息 -->
      <el-descriptions column="1" border>
        <el-descriptions-item label="用户名">{{ user.username }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ user.email }}</el-descriptions-item>
        <el-descriptions-item label="简介">{{ user.bio || '无' }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ user.createdAt || '无' }}</el-descriptions-item>
      </el-descriptions>

      <!-- 按钮组 -->
      <div style="margin-top: 30px; display: flex; justify-content: center; gap: 20px;">
        <el-button type="primary" @click="goEdit">编辑信息</el-button>
        <el-button @click="goHome">返回主页</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router';

const router = useRouter();

const user = {
  username: localStorage.getItem('username'),
  nickname: localStorage.getItem('nickname'),
  email: localStorage.getItem('email'),
  avatarUrl: localStorage.getItem('avatarUrl'),
  bio: '',
  createdAt: '',
};

const goEdit = () => {
  router.push('/profile');  // 假设编辑页面路由是 /profile
};

const goHome = () => {
  router.push('/home');
};
</script>


<style scoped>
h2 {
  margin-bottom: 20px;
}
</style>
